<template>
	<view class="authorized_store">
		<slot></slot>
		<view class="store_list">
			<view class="store_item" v-for="(item,index) in shopList.slice(0,2)" :key="index">
				<view class="store_item_top">
					<view class="top_one">
						<text v-if="index===0">最近门店</text> {{ item.title }}
					</view>
					<view class="top_two">
						<text>{{ item.name }}</text>
						<text style="margin-left: 48rpx;">{{ item.phone }}</text>
					</view>
					<view class="top_three">
						<!-- 广东省广州花都区荔红北路888号（距您26.88Km） -->
						{{ item.address }}（距您{{ item.distance }}Km）
					</view>
				</view>
				<view class="store_item_bottom">
					<view @click="functionClick(oindex,item)" class="function_item" v-for="(oitem,oindex) in storeFunction" :key="oindex">
						<img :src="oitem.iconPath" :alt="oitem.name" style="width: 24rpx; height: 24rpx;">
						<text>{{oitem.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 授权门店功能按钮
				storeFunction:[
					{
						iconPath:'/static/home/nav.png',
						name:'导航'
					},
					{
						iconPath:'/static/home/tel.png',
						name:'拨号'
					},
					{
						iconPath:'/static/home/copy.png',
						name:'复制'
					}
				]
			}
		},
		computed:{
		},
		props:{
			shopList:{
				type: Array,
				default: []
			},
			longitude:{
				type: Number,
				default: 0
			},
			latitude:{
				type: Number,
				default: 0
			}
		},
		methods: {
			// 授权门店功能按钮点击事件
			functionClick(index,item){
				switch(index){
					case 0://导航
						uni.openLocation({
							latitude:parseFloat(this.latitude),
							longitude:parseFloat(this.longitude),
							scale: 18,
							success: (res)=>{},
							fail: (res)=>{
								console.log(res);
							}
						})
						break;
					case 1://拨号
						if(item.phone == null || item.phone ===''){
							uni.showToast({title:"暂无联系方式！",icon:"error"});
							return;
						}
						uni.makePhoneCall({
							phoneNumber:item.phone
						})
						break;
					case 2://复制
						this.$util.uniCopy({
						content: '门店：'+item.title+'      '+item.address+' ；联系人：'+item.name+'       '+item.phone,
						success: function success() {uni.showToast({title:'复制成功!'});},
						error: function error() {uni.showToast({title:"复制失败！",icon:"error"});}})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.authorized_store{
	display: flex;
	flex-direction: column;
	margin-bottom: 42rpx;
}
.store_list{
	display: flex;
	flex-direction: column;
	.store_item{
		display: flex;
		flex-direction: column;
		padding: 30rpx 24rpx 26rpx 24rpx;
		margin-bottom: 16rpx;
		height: 240rpx;
		justify-content: space-between;
		background-color: #10100e;
		// background-color: #55ffff;
		font-family: PingFang SC, PingFang SC;
		color: #FFFFFF;
		// &:active{
		// 	background-color: #686863;
		// }
		.store_item_top{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			view{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.top_one{
				font-weight: 500;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				text{
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					padding: 4rpx;
					background-color: #FBCB11;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					margin-right: 14rpx;
				}
			}
			.top_two{
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
			}
			.top_three{
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 22rpx;
			}
		}
		.store_item_bottom{
			font-family: PingFang SC, PingFang SC;
			font-weight: 300;
			font-size: 22rpx;
			color: #FFFFFF;
			display: flex;
			.function_item{
				display: flex;
				align-items: center;
				margin-right: 48rpx;
				img{margin-right: 4rpx;}
			}
		}
	}
}
</style>
